<template>
	<view>
		<view class="folder-header">
			<view class="folder-title">{{ folderName }}</view>
			<view class="folder-desc">{{ folderDesc }}</view>
			<view class="folder-content-num">内容数量: {{ folderContentNum }}</view>
			<button class="edit-button" @click="editFolder">编辑</button>
		</view>
		<view class="folder-contents">
			<view v-for="content in folderContents" :key="content.postId" class="content-item">
				<view class="content-title">{{ content.title }}</view>
				<view class="content-description">{{ content.content }}</view>
				<view class="content-author">作者: {{ content.username }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				token: '',
				folderId: '',
				folderName: 'java修炼手册',
				folderContentNum: '1000',
				folderDesc: '《Java修炼手册》是一本备受推崇的 Java 编程书籍，通常指的是《Effective Java》（《Effective Java: A Programming Language Guide》），作者是 Joshua Bloch。这本书不仅适合初学者，也适合有经验的开发者进行深入学习和提升。',
				folderContents: [
					{ postId: '1', title: 'java从入门到入土', content: '《Java从入门到入土》通常是对 Java 学习过程的幽默表达，意在强调学习 Java 的曲折与挑战。以下是一个学习 Java 的大致路线图，从入门到深入，甚至到精通的阶段。', userId: '', username: '余胜军' }
				],
				newfolderName: '',
				newfolderDesc: '',
			}
		},
		methods: {
			initPage() {
				this.uid = uni.getStorageSync('UID');
				this.token = uni.getStorageSync('token');
				if (this.uid != '' && this.token != '') {
					this.getFavorites();
				}
			},
			editFolder() {
				// 编辑收藏夹的逻辑
				console.log("编辑收藏夹");
				// 这里可以打开一个编辑页面或弹出框
			},
		},
		onLoad(param) {
			this.folderId = param.folderId;
		}
	}
</script>

<style>
.folder-header {
    padding: 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.folder-title {
    font-size: 24px;
    font-weight: bold;
}

.folder-desc {
    font-size: 16px;
    margin-top: 10px;
    color: #666;
}

.folder-content-num {
    font-size: 14px;
    margin-top: 5px;
    color: #888;
}

.edit-button {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.folder-contents {
    padding: 20px;
}

.content-item {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #fff;
}

.content-title {
    font-size: 18px;
    font-weight: bold;
}

.content-description {
    font-size: 14px;
    margin-top: 5px;
}

.content-author {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}
</style>
